<template>
  <view class="header">
    <text class="line" />
    <div class="box">
      <view class="header-title-content ">
        <view class="left-content">
          <uni-icons type="arrow-left" size="24" color="#fff" />
        </view>
        <view>
          <text class="header-title">
            待选新词
          </text>
          <view class="flex-content">
            <text>待选</text>
            <text class="count">
              10
            </text>
            <text>个，去选词</text>
            <uni-icons type="right" size="14" color="#fff" />
          </view>
        </view>
      </view>
    </div>
    <div class="box">
      <view class="header-title-content">
        <view class="left-content">
          <uni-icons type="arrow-left" size="24" color="#fff" />
        </view>
        <view>
          <text class="header-title">
            学前已会
          </text>
          <view class="flex-content">
            <text>温故知新，去看看</text>
            <uni-icons type="right" size="14" color="#fff" />
          </view>
        </view>
      </view>
    </div>
  </view>
</template>

<style lang="scss" scoped>
.flex-content {
    display: flex;
    align-items: center;
}

.header {
    width: 100%;
    background-color: $uni-color-primary;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60rpx 50rpx;
    box-shadow: 0 8px 10px 0 #cccccc8c;
    color: #fff;
    font-size: 12px;
    box-sizing: border-box;
    position: relative;

    .line {
        position: absolute;
        right: 50%;
        top: 40rpx;
        bottom: 40rpx;
        background-color: #88CDC0;
        width: 1px;
    }

    .header-title {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 4rpx;
        display: block;
    }

    .header-title-content {
        display: flex;
        align-items: center;
    }

    .left-content {
        border: 1px solid #fff;
        border-radius: 50%;
        width: 70rpx;
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
    }

    .count {
        color: #FFB500;
    }
}
</style>
